<template>
  <div>
    <HeaderBar></HeaderBar>
    <Scroller :next="refresh">
      <div slot="list">
        <ul>
          <li style="color: #000000" v-for="(x,index) in list" :key="index">列表{{index}}</li>
        </ul>
      </div>
    </Scroller>
    <BottomTabbar></BottomTabbar>
  </div>
</template>

<script>
  import BottomTabbar from "@/views/base/app/BottomTabbar";
  import HeaderBar from "@/views/base/app/HeaderBar";
  import Scroller from '../../components/scroll'
  export default {
    name: "Index",
    components:{HeaderBar, BottomTabbar,Scroller},
    data(){
      return{
        list:[],

        backup: [
          { title: 'Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果' },
          { title: '混合是一种灵活的分布式复用 Vue 组件的方式。混合对象可以包含任意组件选项' },
          { title: '由于多个状态分散的跨越在许多组件和交互间各个角落，大型应用复杂度也经常逐渐增长。为了解决这个问题，Vue 提供 vuex' },
          { title: 'Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器。' },
          { title: '除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令。' },
          { title: '混合是一种灵活的分布式复用 Vue 组件的方式。混合对象可以包含任意组件选项。' },
          { title: 'Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据' },
          { title: '模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护' },
          { title: '许多事件处理的逻辑都很复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的' },
          { title: 'Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新' }
        ],
        page:{
          counter:1,
          pageStart:1,
          pageEnd:1,
          total:10
        },
      }
    },
    methods:{
      refresh(){

        return new Promise((resolve, reject) => {
          setTimeout(() => {
            const appendList = []
            const temp = {}
            while (appendList.length < 3) {
              const index = Math.floor(Math.random() * 10)
              if (!temp[`attr${index}`]) {
                temp[`attr${index}`] = this.backup[index]
                appendList.push(this.backup[index])
              }
            }
            for (let i = 0; i < appendList.length; i++) {
              this.list.unshift(appendList[i])
            }
            resolve()
          }, 2000)
        })
      }
    },
    created(){

    },
    mounted(){
      for(let i=0;i<1*50;i++){
        this.list.push({})
      }

    },
  }
</script>

<style scoped>

</style>
